<template>
	<view class="o-hidden">
		<!-- TODO 登录 -->
		<view class="logo">
			<u-image src="/static/logo.png" width="180" height="180" :fade="false" :border-radius="20"></u-image>
		</view>
		<u-form class="form container" ref="form" :model="form" :rules="rules" :error-type="['toast']">
			<u-form-item prop="phone">
				<u-image class="u-m-r-48" src="/static/images/phone.png" width="28" height="44" :fade="false"></u-image>
				<u-input v-model="form.phone" type="text" maxlength="11" placeholder="请输入手机号"></u-input>
			</u-form-item>
			<u-form-item prop="password">
				<u-image class="u-m-r-48" src="/static/images/lock_empty.png" width="31" height="39" :fade="false"></u-image>
				<u-input v-model="form.password" type="password"></u-input>
			</u-form-item>
		</u-form>
		
		<u-button :custom-style="{backgroundColor: '#2FD6AC', color: '#ffffff', width: '582rpx', marginTop: '100rpx'}" :loading="!isClick" @click="login">登录</u-button>
		
		<view class="container u-flex u-row-between u-m-t-32">
			<view class="text">忘记密码</view>
			<view class="text" @click="navTo('/pages/member/register')">注册账号</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isClick: true,
				form: {
					phone: '',
					password: '',
				},
				rules: {
					phone: [
						{required: true, message: '手机不能为空'},
						{validator: (rule, value, callback) => {
							return this.$u.test.mobile(value)
						}, message: '手机号不正确'}
					],
					password: [
						{required: true, message: '密码不能为空'}
					]
				}
			}
		},
		methods: {
			login() {
				if (this.isClick) {
					this.$refs.form.validate(res => {
						if (res && this.isClick) {
							this.isClick = false
							setTimeout(() => {
								this.isClick = true
								uni.showToast({
									icon:'none',
									title:'处理登录'
								})
							}, 1500)
						}
					})
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		}
	}
</script>

<style lang="scss">
	.logo {
		text-align: center;
		display: flex;
		justify-content: center;
		margin-top: 164rpx;
	}
	.container {
		width: 582rpx;
		margin: 0 auto;
	}
	.form {
		margin-top: 100rpx;
	}
	.text {
		color: #9F9F9F;
		font-size: 24rpx;
	}
</style>
